import React from "react";
import styles from "../css/register.module.css";
import ProgressView from "../view/ProgressView";

import PressTouch from "../view/PressTouch";
import { locationTo } from "../utils/LocationUtil";
import * as locations from "../const/locations";
import { checkPhone } from "../utils/RegUtil";
import BaseScreen from "./BaseScreen";
import { MyButton } from "../view/MyButton";
import InputView from "../view/inputView";
import Config from "../Config";
import { LOGIN } from "../const/imgs";
import LoginHeader from "../view/loginHeader";
class RegisterScreen extends BaseScreen {
  handleInput = (type, event) => {
    let value = event.target.value;
    switch (type) {
      case "phone":
        this.setState({ phone: value });
        break;
      case "password":
        this.setState({ password: value });
        break;
      case "password2":
        this.setState({ password2: value });
        break;
      case "yzm":
        this.setState({ yzm: value });
        break;
      default:
    }
  };

  constructor(props) {
    super(props);
    this.state = {
      ...this.getDefaultState(),
      phone: "",
      password: "",
      password2: "",
      yzm: "",
      getYzm: "获取验证码",
      check: false,
      loading: false,
      passwordType: "password"
    };
  }

  componentDidMount() {
    document.title = "注册";
  }

  componentWillUnmount() {
    clearInterval(this.tt);
  }

  isVerify() {
    return false;
  }

  check(phone, yzm, password, password2) {
    if (!phone) {
      this.showMsgDialog("手机号不能为空");
    } else if (!checkPhone(phone)) {
      this.showMsgDialog("请输入正确的手机号");
    } else if (!yzm) {
      this.showMsgDialog("验证码不能为空");
    } else if (!password) {
      this.showMsgDialog("密码不能为空");
    } else if (password.length < 6) {
      this.showMsgDialog("密码长度不能小于6位");
      // } else if (password !== password2) {
      //     this.showMsgDialog('密码不一致')
    } else {
      this.onRegister(phone, password, yzm);
    }
  }

  tt;

  time() {
    let i = 120;
    this.tt = setInterval(() => {
      this.setState({
        getYzm: i + "s"
      });
      i--;
      if (i < 0) {
        clearInterval(this.tt);
        this.setState({
          getYzm: "重新获取"
        });
      }
    }, 1000);
  }

  getCode(phone) {
    let params = {
      wechat_id: Config.SysFlag,
      phone: phone,
      type: "register"
    };
    this.setState({ loading: true });
  }

  onRegister = (phone, password, yzm) => {
    let params = {
      phone: phone,
      password: password,
      ident: "",
      check: 1,
      code: yzm,
      wechat_id: Config.SysFlag
    };
    this.setState({ loading: true });
    
  };

  dealGetCode() {
    const phone = this.refs.account.state.value;
    if (!phone || !checkPhone(phone)) {
      this.showMsgDialog("请输入正确的手机号");
    } else {
      this.getCode(phone);
    }
  }

  render() {
    const { yzm, getYzm, loading } = this.state;
    return (
      <div
        className={styles[`register`]}
        // style={registerStyle}
      >
        <LoginHeader isLogin={false} />
        <div className={styles["info-content"]}>
          <InputView
            ref="account"
            label="手机号"
            className={styles["phoneNumber-content"]}
            placeholder="请输入手机号"
            isClear={true}
          />
          <div>
            <div style={{ fontSize: "14px", lineHeight: "28px" }}>验证码</div>

            <div className={styles["yzm-content"]}>
              <input
                type="text"
                placeholder="请输入验证码"
                value={yzm}
                onChange={e => {
                  this.handleInput("yzm", e);
                }}
              />
              <button
                className={styles["getYzm"]}
                style={FontColor}
                disabled={!(getYzm === "获取验证码" || getYzm === "重新获取")}
                onClick={() => {
                  this.dealGetCode();
                }}
              >
                {getYzm}
              </button>
            </div>
          </div>
          <InputView
            className={styles["pwd-content"]}
            ref="password"
            type="password"
            placeholder="请输入您的密码，长度不小于6位"
            label="密码"
            Click={this.showPsd}
            isClear={false}
          />
          <MyButton
            onClick={() => {
              this.check(
                this.refs.account.state.value,
                this.state.yzm,
                this.refs.password.state.value
                // this.refs.password2.state.value
              );
            }}
            name={"注册"}
            style={style}
          />
        </div>
        {/* <section className={styles["ps"]} style={FontColor}>
                    <span className={"toLogin"} onClick={() => {
                        locationTo(locations.LOGIN, '');
                    }}>已有账号？返回登录</span>
            </section> */}
        <div className={styles["loading"]}>
          {this.renderMsgDialog()}
          <ProgressView visibility={loading} mode={ProgressView.MODE_MEDIUM} />
        </div>
      </div>
    );
  }
}
const style = {
  marginTop: "4.125rem",
  height: "20px",
  lineHeight: "20px"
};
// const registerStyle = { background: `url("${Config.loginBgAdress}") repeat-x`, backgroundSize: '100% 50rem' };
const iconStyle = {
  // background: `url("${Config.iconAdress}") no-repeat`,
  backgroundSize: "100% 100%"
};
const FontColor = { color: `${Config.BaseColor}` };

export default RegisterScreen;
